<template>
	<view class="container">
		<view class="fixed_top">
		<view class="top_address">
			<text class="backs" @click="backs()"></text>
			 我的收货地址
			<text class="tianjia" @click="tianjia()">添加</text>
		</view>
		</view>
		<view class="address" >
		  <scroll-view scroll-y="true" style="height: 100%;width: 100%;" @scroll="loadMores"  :refresher-threshold="100">
			<view class="list" v-for="value in list">
				<view class="left">
					<view class="name">
					  <text class="name_1">{{value.people}}</text>
					  <text class="name_2">{{value.phone}}</text>
					  <text class="name_3" v-if="value.is_default==1">默认</text>
					</view>
					<view class="address-box">{{value.address}}</view>
				</view>
				<view class="right">
					 <text class="btn-ok" @click="subs(value)">编辑</text>
					 <text class="btn-cancel" @click="dels(value)">删除</text>
				</view>
			</view>
			</scroll-view>
			
		</view>
		
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	export default {
		data() {
		return {
			firstNum:1,
			last_page:1,
			num:20,
			list:[]
		  }
		},
		onLoad() {
			this.getlist()
		},
		onPullDownRefresh() {
			this.loadMores()
		},
		onReachBottom(e) {
			this.loadMores();
		},
		methods:{
			tianjia(){
				uni.navigateTo({
					url:'/pages/addressForm/addressForm'
				})
			},
			backs(){
				uni.navigateBack({
					
				})
			},
			loadMores(){
				let that = this
				let status = that.type
				let num = that.num
				let token = uni.getStorageSync('token')
				that.firstNum=that.firstNum+1
				if(that.firstNum>that.last_page){
					uni.showToast({
						title: "没有更多数据",
						icon:'none'
					})
					return
				}
				//that.list=[]
				ajax({
					url: 'address',
					data: {
						token: token,
						firstNum: that.firstNum,
						num: num,
						status: status
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						console.log("token", res.data.data.data)
						//res.data.data.data[0].status_text='已发货'
						
						   res.data.data.data.slice(0).forEach(e => {
							  that.list.push(e);
							});
						
						that.last_page=res.data.data.last_page
						
					},
					error: function() {
							
					}
				});
			},
			dels(value){
				let that =this
				ajax({
					url: 'address/delAddress',
					data: {
						token:uni.getStorageSync('token'),
						address_id: value.address_id,
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						if(res.data.code==1){
							uni.showToast({
								title: '删除成功',
								duration: 1500,
								icon: 'none'
							});
							that.getlist()
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
						
					},
					error: function() {
							
					}
				});
			},
			subs(value){
				uni.navigateTo({
					url:'/pages/addresslist/addressEdit?id='+value.address_id
				})
			},
			getlist() {
				let that = this
				let status = that.type
				let firstNum = that.firstNum
				let num = that.num
				let token = uni.getStorageSync('token')
				that.list=[]
				ajax({
					url: 'address',
					data: {
						token: token,
						firstNum: firstNum,
						num: num,
						status: status
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						console.log("token", res.data.data.data)
						//res.data.data.data[0].status_text='已发货'
						that.list = res.data.data.data
						that.last_page=res.data.data.last_page
						
					},
					error: function() {
			
					}
				});
			},
		}	
	}
</script>

<style lang="scss">
	page{
		background: #F1F1F1;
	}
	.fixed_top{
		position: fixed;
		width: 100%;
		z-index: 100;
		height: 68rpx;
		top: 0rpx;
		left: 0rpx;
		background: #F1F1F1;

	}
	.container{
		margin: 0rpx auto;
		padding: 0rpx 0rpx;
		.top_address{
			width: 100%;
			height: 68rpx;
			line-height: 68rpx;
			font-size: 34rpx;
			color: #333333;
			font-weight:550;
			text-align: center;
			position: relative;
			.backs{
				position: absolute;
				width: 38rpx;
				height: 38rpx;
				left: 12rpx;
				top: 12rpx;
				background: url(../../static/clq-image/back.png) no-repeat center;
				background-size: 100%;
				display: inline-block;
			}
			.tianjia{
				position: absolute;
				width: 68rpx;
				font-size: 28rpx;
				color: #FF7427;
				text-align: center;
				line-height: 38rpx;
				height: 38rpx;
				right: 10rpx;
				top: 20rpx;
				display: inline-block;
			}
			
		}
		.address{
			margin: 88rpx auto auto auto;
			padding: 0rpx 0rpx;
			.list{
				width: 90%;
				padding: 2%;
				border-radius: 20rpx;
				background: #FFFFFF;
				margin: 20rpx auto;
				font-size: 28rpx;
				color: #333;
				overflow: hidden;
				.left{
					float: left;
					width: 70%;
					border-right: 2rpx solid #E5E5E5;
					.name{
						.name_1{
							color: #333;
							font-size: 30rpx;
						}
						.name_2{
							margin-left: 12rpx;
							color: #999;
						}
						.name_3{
							display: inline-block;
							width:58rpx;
							height: 38rpx;
							text-align: center;
							font-size: 24rpx;
							line-height: 38rpx;
							background: #FF7427;
							color: #FFFFFF;
							margin-left: 18rpx;
							border-radius: 8rpx;
						}
					}
					.address-box{
						margin-top: 12rpx;
						font-size: 30rpx;
						color: #333333;
					}
					
				}
				.right{
					width: 29%;
					float: right;
					vertical-align: middle;
					text-align: center;
					line-height: 88rpx;
					.btn-ok{
						color: #FF7427;
						border: 2rpx solid #FF7427;
						border-radius: 8rpx;
						width: 68rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						margin-left: 20rpx;
						font-size: 28rpx;
						text-align: center;
						
						display: inline-block;
					}
					.btn-cancel{
						color: #555555;
						border: 2rpx solid #555555;
						border-radius: 8rpx;
						width: 68rpx;
						margin-left: 20rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						font-size: 28rpx;
						text-align: center;
						display: inline-block;
					}
				}
			}
		}
		
	}
	
	
</style>
